<template>
<div class="tpl39-goods">
  <div class="slider-goods">
    <scroll class="wrapper"
                  ref="wrapper"
                  :startX="0"
                  :click="true"
                  :scrollX="true"
                  :scrollY="false"
                  :eventPassthrough="'vertical'">
      <section
        class="modulePadding"
        :style="`padding-top:${tplItemData.modulePadding}px; padding-bottom:${tplItemData.modulePadding}px;`">
        <section class="members_goods">
          <ul class="clearfix">
            <li v-for="(goods, index) in tplItemData.goodslist" :key="index">
              <section class="goods_items">
                <a @click="openLink(goods.link)">
                  <img :src="goods.is_compress == 1 ?`${goods.pic}480x480`:goods.pic" alt/>
                  <b v-if="goods.is_sell_out == 1" class="sold-out"></b>
                </a>
      
                <p v-if="tplItemData.showName == 1" class="goods-title">{{ goods.title }}</p>
                <p style="text-align: center">
                  <em
                    :class="tplItemData.priceBold == 0 ? 'fwt_normal': ''"
                    class="goods_pirce">&yen;{{goods.price}}</em>
                </p>
              </section>
            </li>
          </ul>
        </section>
      </section>
      
    </scroll>
  </div>
</div>

</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
import Scroll from '@/components/scroll/index'
export default Vue.extend({
  components: {
    Scroll
  },
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {

        }
      }
    }
  },
  data() {
    return {}
  },
  created() {
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    },
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
.tpl39-goods{
  .members_goods{
    background:#fff;
    padding:12px 6px;
    ul {
      li{
        display: inline-block;
        float: left;
        width: 31.2%;
        margin: 0 6px 12px 6px;
        a{
          display: block;
          position:relative;
          padding-top:100%;
          overflow:hidden;
          &>img{
            position:absolute;
            top: 0;
            left: 0;
          }
        }
        .goods-title{
          height: 56px;
          line-height: 28px;
          white-space: inherit;
          color: #666666;
          font-size: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .goods_pirce{
          color: #666666;
          font-weight: bold;
        }
        .orign_price{
          display: block;
          color: #999;
          font-size: 20px;
        }
      }
    }
  }
  .slider-goods{
    overflow: hidden;
    white-space: nowrap;
    a{
      display: block;
    }
    .slider-goods-box{
      display: inline-block;
      white-space: nowrap;
      .slider-goods-item{
        width: 244px;
        margin: 0 6px 14px 8px;
        display: inline-block;
        &.slider-item-length2{
        width: calc((750px - 28px)/ 2);
        }
        &.slider-item-length3{
          width: calc((750px - 42px)/ 3);
        }
      }
    }
  }
}
</style>
